<template>
  <div class="product">
    <el-row :xl="24" :md="12" :sm="24" :lg="6" class="product-content">
      <el-col class="product-content-text" :md="12" :sm="24" :lg="12">
        <h1>
          Knitwear
          <br />New Arrivals
        </h1>
        <p>
          Explore the latest additions to our best-in-class line up
          <br />of sweaters, cardigans, hoodies and more.
        </p>
        <el-row>
          <button>
            <a
              href="https://www.canadagoose.com/ca/en/shop/men/knitwear/"
              title="Shop Men"
              data-gtm_source="home.mainhero.cta2"
            >Shop Men</a>
          </button>
          <button>
            <a
              class="cta-btn cta-btn-white"
              href="https://www.canadagoose.com/ca/en/shop/women/knitwear/"
              title="Shop Women"
              data-gtm_source="home.mainhero.cta1"
            >Shop Women</a>
          </button>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.product {
  .product-content {
    display: flex;
    align-items: center;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    height: 50vh;
    text-align: center;
    .product-content-text {
      max-width: 50%;
    }
    button {
      display: inline-block;
      // min-width: 200px;
      // max-width: 300px;
      width: 200px;
      height: 40px;
      margin: 20px 15px;
      text-align: center;
      background-color: #fff;
    }
    button a {
      color: #000;
      text-decoration: none;
    }
    // button:hover {
    //   background-color: #000;
    //   color: #fff;
    // }
    h1 {
      color: #fff;
      font-size: 40px;
    }
    p {
      color: #fff;
    }
  }
  @media only screen and (max-width: 768px) {
    .product-content {
      background-image: url("https://images.canadagoose.com/c_scale,f_auto,q_auto:best,w_768/cg-global/campaigns/190807/home-main-m.jpg");
    }
  }
  @media only screen and (min-width: 768px) {
    .product-content {
      background-image: url("https://images.canadagoose.com/c_scale,f_auto,q_auto:best,w_992/cg-global/campaigns/190807/home-main-t.jpg");
    }
  }
  @media only screen and (min-width: 992px) {
    .product-content {
      background-image: url("https://images.canadagoose.com/c_scale,f_auto,q_auto:best/cg-global/campaigns/190807/home-main-d.jpg");
    }
  }
}
</style>